<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <!--引入样式-->
    <link rel="stylesheet" type="text/css" href="../css/cart1111.css" />
    <script type="text/javascript" src="../js/cart1111.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/cartAPI.JS"></script>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script> 
</head>

<body>
    <!--导航栏开始-->
    <div class="nav">

        <div class="fir">
            <ul class="nav_ul1">
                <li>
                    <i class="iconfont">&#xe644;</i>
                    <a href="index.html">京东首页</a>
                </li>
                <li>
                    <i class="iconfont">&#xe62a;</i>
                    <select>

                        <option>海外</option>
                        <option>港澳</option>
                        <option>大陆</option>
                    </select>
                </li>
            </ul>


            <ul class="nav_ul2">
                <li>
                    <a href="https://order.jd.com/center/list.action">我的订单</a>

                </li>
                <li>
                    <span>|</span>
                    <a href="https://home.jd.com/">我的京东</a>

                </li>
                <li>
                    <span>|</span>
                    <a href="https://vip.jd.com/">京东会员</a>

                </li>
                <li>
                    <span>|</span>
                    <a href="https://b.jd.com/">企业采购</a>

                </li>
                <li>
                    <span>|</span>
                    <select>
                        <option>客户服务</option>
                        <option>客户</option>
                        <option>商户</option>

                    </select>

                </li>
                <li>
                    <span>|</span>
                    <select>
                        <option>网站导航</option>
                        <option>特殊主题</option>
                        <option>行业频道</option>
                        <option>生活服务</option>
                        <option>更多精彩</option>
                    </select>

                </li>
                <li>
                    <span>|</span>
                    <a href="https://app.jd.com/">手机京东</a>
                </li>

            </ul>

        </div>


    </div>
    <!--导航栏结束-->
    <!--搜索框开始-->
    <div class="search">
        <div class="fir">

            <img style="width: 100px;" src="../img/JDlogo.gif" />

            <div class="search_div">

                <input type="text" class="search_text" />
                <button class="search_bt">搜索</button>
            </div>

        </div>

    </div>

    <!--搜索框结束-->

    <!--标题栏开始-->
    <div class="title fir">

        <h3>全部商品</h3>
        <div class="title_1">
            <i>配送至：</i>
            <select>
                <option>海外</option>
                <option>大陆</option>
                <option>港澳</option>
            </select>
        </div>

    </div>
    <!--标题栏结束-->

    <!--显示栏开始-->
    <div class="typs fir">
        <ul>
            <li>
                <input type="checkbox" name="fav" onclick="checkTest1(this)" />
            </li>
            <li id="all-sel">全选</li>
            <li>商品</li>
            <li>单价</li>
            <li>数量</li>
            <li>小计</li>
            <li>操作</li>
        </ul>
    </div>



    <!--显示栏结束-->
    <!--空白开始-->

    <!--空白结束-->
    <!--商品展示栏开始-->
    <div class="check fir">
        <ul class="check_ul1">
            <li>
                <input type="checkbox" name="fav" onclick="checkTest1(this)" />

            </li>
            <li id="all-sel">
                全选
            </li>
            <li>
                <a href="javascript:void(0)" onclick="checkTest5()">删除选中的商品</a>
            </li>
            <li>
                <a href="">移入关注</a>
            </li>
            <li>
                <a href=""><b>清理购物车</b></a>
            </li>
        </ul>

        <ul class="check_ul2">
            <li class="zj1" id="zongjia">总价：</li>
            <li class="zj2" id="all-count-span">0</li>
            <li>
                <button><a href="">去结算</a></button>
            </li>
        </ul>
    </div>


    <div class="info fir">

    </div>




    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</body>
<script>


    let cartObjArray = null;//记录  购物车列表的状态

    let uid = localStorage.getItem('id')
    console.log(uid)


    loadCartList()


    // 购物车列表 
    async function loadCartList() {

        let cartListAPI = "http://jx.xuzhixiang.top/ap/api/cart-list.php"
        let { data } = await axios.get(cartListAPI, { params: { id: uid } })
        console.log(data);
        cartObjArray = data.data;
        updateUl()

    }


    //WithCartObjArray
    function updateUl() {
        console.log(11)
        cartObjArray
        let cartLiArray = cartObjArray.map(pObj => `
        <div class="info fir">
        <ul >
        <li class="info_1">
                <input class="single-sel" type="checkbox" name="fav"   ${pObj.checked ? 'checked' : ''} />
            </li>
            <li class="info_2">
                <img src="${pObj.pimg}" width="100px" />
            </li>
            <li class="info_3">
                <i class="info_i">京品手机</i>${pObj.pname}

            </li>
            <li class="info_4" style="width: 100px;" >
              

            </li>
            <li class="info_5">
                ${pObj.pprice}
            </li>
            <li class="info_6">
                <button class="bu1 sub-btn"" onclick="checkTest3(this,1)" data-pid="${pObj.pid}">-</button>
            </li>
            <li class="info_7">
                <input  class="num-ipt" type="text" value="${pObj.pnum}" />
            </li>
            <li class="info_8">
                <button class="add-btn" onclick="checkTest3(this)" data-pid="${pObj.pid}">+</button>
            </li>
            <li class="info_9 p-count">
                <b>￥${pObj.pprice*pObj.pnum}</b>
            </li>
            <li class="info_10">
                <input class="delbtn" type="button" value="删除" data-pid="${pObj.pid}">

                <br />
                移入关注
            </li>
          
         </ul >
      </div>
      <br>
    `);

        let list = document.querySelector('.info ');
        list.innerHTML = cartLiArray.join('');

        /*  */
        let numIpts = document.querySelectorAll('.num-ipt');
        let delBtns = document.querySelectorAll(".delbtn");
        let subBtns = document.querySelectorAll('.sub-btn');
        console.log(delBtns)
        delBtns.forEach((btn, i) => {
            btn.onclick = async () => {
                //cartDeleteAPI
                let pid = btn.getAttribute("data-pid");
                let cartDeleteAPI = "http://jx.xuzhixiang.top/ap/api/cart-delete.php"
                let { data } = await axios.get(cartDeleteAPI, { params: { pid, uid } })
                console.log(data);

                // 页面变   
                // 局部变量  dom remove 
                // btn.parentNode.remove()   

                // 刷新列表-》 数组中元素删除cartObjArray， updateUl

                // cartObjArray 中id位置 pid 的元素删除了
                // cartObjArray.splice(i, 1)

                // 把满足条件的元素 过滤出来
                cartObjArray = cartObjArray.filter(v => v.pid != pid)
                updateUl()


            }
        })
        //    加号按钮
        let addBtns = document.querySelectorAll('.add-btn');
        console.log(addBtns)
        addBtns.forEach((btn, i) => {
            btn.onclick = async () => {
                //不光发起请求   修改cartObjArray 
                //商品数量 两种获取方式 1-  输入框 value 5  
                // 2- cartObjArray 

                // 1 - 输入框 value 5
                let pnumIpt = numIpts[i];
                console.log(pnumIpt.value);

                // 2- cartObjArray 
                let pid = btn.getAttribute('data-pid');
                console.log(pid);
                let pObj = cartObjArray.find(v => v.pid == pid)
                console.log(pObj.pnum);

                // 让输入框的值 加1
                pnumIpt.value = parseInt(pnumIpt.value) + 1

                // 修改了 cartObjArray  中 的对象 的pnum属性
                pObj.pnum = pnumIpt.value

                // cartUpdateAPI

                let { data } = await axios.get(cartUpdateAPI, { params: { uid, pid, pnum: pObj.pnum } })

                console.log(data);
                // 修改总价  
                // 局部修改， pObj.pnum*pObj.pprice
                // pCounts[i].innerHTML = pObj.pnum * pObj.pprice

                // 刷新列表
                // loadCartList()
                updateUl()

            }
        })
        // 减号按钮
        subBtns.forEach((btn, i) => {
            btn.onclick = async () => {
                //不光发起请求   修改cartObjArray 
                //商品数量 两种获取方式 1-  输入框 value 5  
                // 2- cartObjArray 

                // 1 - 输入框 value 5
                let pnumIpt = numIpts[i];
                console.log(pnumIpt.value);

                if (pnumIpt.value == '1') {
                    return;
                }

                // 2- cartObjArray 
                let pid = btn.getAttribute('data-pid');
                console.log(pid);
                let pObj = cartObjArray.find(v => v.pid == pid)
                console.log(pObj.pnum);

                // 让输入框的值 加1
                pnumIpt.value = parseInt(pnumIpt.value) - 1

                // 修改了 cartObjArray  中 的对象 的pnum属性
                pObj.pnum = pnumIpt.value

                // cartUpdateAPI

                let { data } = await axios.get(cartUpdateAPI, { params: { uid, pid, pnum: pObj.pnum } })

                console.log(data);
                // 修改总价  
                // 局部修改， pObj.pnum*pObj.pprice
                // pCounts[i].innerHTML = pObj.pnum * pObj.pprice

                // 刷新列表
                // loadCartList()
                updateUl()

            }
        })

        // 减号按钮
        subBtns.forEach((btn, i) => {
            btn.onclick = async () => {
                //不光发起请求   修改cartObjArray 
                //商品数量 两种获取方式 1-  输入框 value 5  
                // 2- cartObjArray 

                // 1 - 输入框 value 5
                let pnumIpt = numIpts[i];
                console.log(pnumIpt.value);

                if (pnumIpt.value == '1') {
                    return;
                }

                // 2- cartObjArray 
                let pid = btn.getAttribute('data-pid');
                console.log(pid);
                let pObj = cartObjArray.find(v => v.pid == pid)
                console.log(pObj.pnum);

                // 让输入框的值 加1
                pnumIpt.value = parseInt(pnumIpt.value) - 1

                // 修改了 cartObjArray  中 的对象 的pnum属性
                pObj.pnum = pnumIpt.value

                // cartUpdateAPI

                let { data } = await axios.get(cartUpdateAPI, { params: { uid, pid, pnum: pObj.pnum } })

                console.log(data);
                // 修改总价  
                // 局部修改， pObj.pnum*pObj.pprice
                // pCounts[i].innerHTML = pObj.pnum * pObj.pprice

                // 刷新列表
                // loadCartList()
                updateUl()

            }
        })

        // 单选 
        let singleSels = document.querySelectorAll('.single-sel');
        singleSels.forEach((sel, i) => {
            sel.onchange = () => {
                console.log(sel.checked);

                cartObjArray[i].checked = sel.checked;

                calCountPrice()


            }
        })


        // 全选 
        let allSelIpt = document.querySelector('#all-sel');
        allSelIpt.onchange = function () {
            console.log(this.checked)
            // 遍历所有单选框 checked属性值 等于 allSel的值
            singleSels.forEach(v => v.checked = this.checked)
            cartObjArray.forEach(v => v.checked = this.checked)
            //计算总价
            calCountPrice()



        }






    }


    function calCountPrice() {

        let singleSels = document.querySelectorAll('.single-sel');

        // 1-计算总价

        // cartObjArray 修改数组中pObj.checked = true ;




        console.log(cartObjArray);

        //计算一下总价 -》 计算一下 哪些 被选中了
        // cartObjArray 遍历数组 pObj.checked === true  pObj.price*pnum
        var count = 0;
        cartObjArray.forEach(v => {
            if (v.checked) {
                count += v.pprice * v.pnum
            }
        })
        console.log(12221)
        document.querySelector('#all-count-span').innerHTML = count;
        console.log(document.querySelector('#all-count-span'))
        // 单选时候 ，判断一下 是否所有的单选框 都被选中了
        let allSel = cartObjArray.every(v => v.checked == true);
        let allSelIpt = document.querySelector('#all-sel');
        allSelIpt.checked = allSel
    }


</script>

</html>